<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>BootStrap+AngularJs分页展示</title>
		<script type="text/javascript" src="../js/angular.min.js" ></script>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script type="text/javascript" src="../js/bootstrap.js" ></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
	</head>
	<body ng-app="paginationApp" ng-controller="paginationCtrl">
		<table class="table table-bordered">
			<tr>
				<th>序号</th>
				<th>商品编号</th>
				<th>名称</th>
				<th>价格</th>
			</tr>		
			<tr ng-repeat="product in products">
				<td>{{$index+1}}</td>
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
			</tr>
		</table>
		<!--  分页按钮 -->
			<div>
				<ul class="pagination pull-right">
					<li>
						<a href ng-click="prev()">上一页</a>
					</li>
					<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
						<a href ng-click="selectPage(page)">{{ page }}</a>
					</li>
					<li>
						<a href ng-click="next()">下一页</a>
					</li>
				</ul>
			</div>
	</body>
	<script type="text/javascript">
		var paginationApp = angular.module("paginationApp",[]);
		paginationApp.controller("paginationCtrl",["$scope","$http",function($scope,$http,){
			
			// 分页组件 必须变量
			$scope.currentPage = 1;
			$scope.pageSize = 4;
			$scope.totalCount = 0;
			$scope.totalPages = 0;
			
			// 要在分页工具条显示所有页码
			$scope.pageList = new Array();
			
			// 加载上一页
			$scope.prev = function(){
				$scope.selectPage($scope.currentPage-1);
			}
			
			// 加载下一页
			$scope.next = function(){
				$scope.selectPage($scope.currentPage+1);
			}
			
			// 加载指定页数据
			$scope.selectPage = function(page){
				
				// page 超出范围
				if($scope.totalPages != 0 && (page <1 || page > $scope.totalPages)){
					return;
				}
				
				// 校验通过
				$http({
					method:'GET',
					url: '11_'+page+'.json',
					params :{
						page : page,
						pageSize : $scope.pageSize
					}
				}).success(function(data,status,headers,config){
					// 显示表格数据
					$scope.products = data.products;
					
					// 根据总记录数,计算总页数
					$scope.totalCount = data.totalCount;
					$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
					
					// 更新当前页码数
					$scope.currentPage = page;
					
					// 显示分页工具条中的页码
					var begin;  //显示第一个页码
					var end;    // 显示最后一个页码
					
					begin = $scope.currentPage - 5;
					if(begin <1){
						begin = 1;
					}
					
					// 要显示10个页码 ,理论上end 是begin+9
					end = begin +9;
					if(end > $scope.totalPages){
						end = $scope.totalPages;
					}
					
					// 修正begin的值,理论上 begin = end -9
					begin = end -9;
					if(begin <1){  // 第一个页码不能小于1
						begin = 1;
					}
					
					// 将页码加入pagelist集合
					for(var i=begin;i<end ; i++){
						$scope.pageList.push(i);
					}
					
				}).error(function(data,status,headers,config){
					// 当响应以错误状态返回时调用
					alert("数据显示出错,请联系相关人员.");
				});
			}
			
			// 判断是否当前页
			$scope.isActivePage = function(page){
				
				return page === $scope.currentPage;
			}
			
			// 初始化 ,选中第一页
			$scope.selectPage(1); 
		}]);
	</script>
</html>
